<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script th:src="@{/js/vue.js}"></script>
    <script th:src="@{/js/axios.js}"></script>
    <link rel="stylesheet" th:href="@{/js/el/theme-chalk/index.css}">
    <script th:src="@{/js/el/index.js}"></script>
</head>
<body>
    <div id="app" >
        <el-container style="height:1000px;" >
            <el-header style="height:7%;padding: 0px;">
                    <div th:include="~{common/head-fore::headFore}">

                    </div>
            </el-header>
            <el-container>
                <el-aside style="height: 100%;">
                    <el-col :span="24" style="height: 100%;">
                        <el-menu
                                default-active="2"
                                class="el-menu-vertical-demo"

                                style="height:100%">
                            <el-menu-item index="0" @click="findAll()">
                                <i class="el-icon-setting"></i>
                                <span slot="title">所有</span>
                            </el-menu-item>
                            <el-menu-item :index="item.id" v-for="(item,idx) in types"
                                          @click="findByType(item.id)" :key="item.id">
                                <i class="el-icon-setting"></i>
                                <span slot="title">{{item.name}}</span>
                            </el-menu-item>
                        </el-menu>
                             </el-col>
                </el-aside>
                <el-main>
                    <div style="width:100%;height:90%;display:block">
                        <div style="width:100%;height:5%;">

                        </div>
                        <div style="width: 100%;height:95%">
                            <div v-for="(item,idx) in blogs" style="width:100%;height:auto;">
                                <div style="width:100%;height:90%;border: 1px solid black">
                                    <div id="title" style="height:10%;width:100%;border: solid 1px royalblue">
                                        {{item.title}}
                                    </div>
                                    <div>
                                        <div>
                                            <p>
                                            &nbsp;&nbsp;&nbsp;&nbsp;
                                            摘要:
                                            <div  style="white-space: nowrap;overflow:hidden;
                                            text-overflow:ellipsis;" v-html="item.text">0
                                            </div>
                                            </p>
                                        </div>
                                        <div style="text-align: right">
                                            <a href="#" @click="findBlog(item.id)">阅读全文</a>
                                            <br>
                                            <p>
                                                {{item.date}}
                                                &nbsp;&nbsp;
                                                作者:
                                                <a href="#">
                                                    <span>{{item.author}}</span>
                                                </a>
                                                &nbsp;&nbsp;
                                                阅读数:
                                                [?]
                                                &nbsp;&nbsp;
                                                点赞数:
                                                {{item.hits}}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <br/>
                            </div>

                        </div>
                    </div>
                </el-main>
            </el-container>
        </el-container>


    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                blogs:[],
                types:[]
            }
        },
        methods:{
            goIndex(){
                window.location.href="/api/public/goIndex"
            },
            userClick(item){
                console.log(item)
                if(item == "my"){
                    window.location.href="/api/user/goUserInfo"
                }
                if(item == "addBlog"){
                    window.location.href="/api/blogs/goAdd"
                }
                if(item == "loginOut"){
                    axios.get("/logout").then(
                        function (resp) {
                            window.location.href=resp.data.action
                        }
                    )
                }
            },
            findAll(){
                var that =this
                axios.get("/api/public/blogs/findBlogs").then(
                    function (resp) {
                        that.blogs = resp.data.data
                        // console.log(that.blogs)
                    }
                )
            },
            findByType(idx){
                var that  =  this
                // console.log(idx)
                axios.post("/api/public/blogs/findByTypeId/"+idx).then(
                    function (resp) {
                        // console.log(resp.data)
                        that.blogs = resp.data.data
                    }
                )
            },
            findBlog(id){
                sessionStorage.setItem("blogid",id);
                window.location.href="/api/public/goFindBlog"
            }
        },
        mounted(){
            var that =this
            this.findAll()
            axios.get("/api/public/type/findAll").then(
                function (resp) {
                    that.types = resp.data.data
                    // console.log(that.types)
                }
            )
        }
    })
</script>
</html>